<!-- 功能：新建用户弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月21日 22:59:06 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="新建用户" width="800px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card>
            <template #title><span class="y-xinJianYongHu-title">用户信息</span></template>
            <a-form-item label="用户名" v-bind="validateInfos.userName">
              <a-input v-model:value="modelRef.userName" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item label="用户ID" v-bind="validateInfos.userId">
              <a-input v-model:value="modelRef.userId" placeholder="请输入用户ID" readonly />
            </a-form-item>
            <a-form-item label="真实姓名" v-bind="validateInfos.name">
              <a-input v-model:value="modelRef.name" placeholder="请输入真实姓名" />
            </a-form-item>
            <a-form-item label="密码设置" v-bind="validateInfos.passwordSetting">
              <a-select v-model:value="modelRef.passwordSetting" placeholder="请选择密码设置">
                <a-select-option value="xinMiMa">新密码</a-select-option>
                <a-select-option value="noLogin">不允许登录</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="新密码" v-bind="validateInfos.password" v-if="modelRef.passwordSetting == 'xinMiMa'">
              <a-input v-model:value="modelRef.password" placeholder="请输入新密码" />
            </a-form-item>
            <a-form-item label="重复新密码" v-bind="validateInfos.passwordAgain" v-if="modelRef.passwordSetting == 'xinMiMa'">
              <a-input v-model:value="modelRef.passwordAgain" placeholder="请输入重复新密码" />
            </a-form-item>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <template #title><span class="y-xinJianYongHu-title">组关系</span></template>
            <a-form-item label="所属组" v-bind="validateInfos.suoShuZu">
              <a-select v-model:value="modelRef.suoShuZu" placeholder="请选择所属组">
                <a-select-option value="ftpxx">ftpxx</a-select-option>
                <a-select-option value="ftpxxx">ftpxxx</a-select-option>
              </a-select>
            </a-form-item>
          </a-card>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  userName: '',
  userId: '1003',
  name: '',
  passwordSetting: 'xinMiMa',
  password: '',
  passwordAgain: '',
  suoShuZu: 'ftpxxx'
})

const rulesRef = reactive({
  userName: [
    {
      required: true,
      message: '请输入用户名'
    }
  ],
  userId: [
    {
      required: true,
      message: '请输入用户ID'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入真实姓名'
    }
  ],
  passwordSetting: [
    {
      required: true,
      message: '请选择密码设置'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ],
  passwordAgain: [
    {
      required: true,
      message: '请再次输入密码'
    }
  ],
  suoShuZu: [
    {
      required: true,
      message: '请选择所属组'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('新建用户>>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
.y-xinJianYongHu-title {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}
</style>